import React, { Component } from 'react'

import { Button, Table, Tag, Space, Modal, Input, Form, Checkbox } from 'antd';


    

    export default class TodoListModal extends Component {
        constructor(props) {
            super(props)
            this.state = {
                isModalVisible: false,
            }
        }

        onFinish = (values) => {
            console.log('Success:', values);
        };
    
        onFinishFailed = (errorInfo) => {
            console.log('Failed:', errorInfo);
        };

        handleOk = () => {
            // console.log("ok,,,,,,", this.form.getFieldValue())
           
            const {getValue, record, updata} = this.props
            let NewObj = this.form.getFieldValue()

            if(updata) {
                getValue({...NewObj, key: record.key})  //  子传父
            } else {
                getValue({...NewObj})
            }
            
            this.setState({
                isModalVisible: !this.state.isModalVisible
            })
            
        }

        showModal = () => {
            const {record} = this.props

            // this.form.setFieldsValue({Name: record.namw, Address: record.address, Age: record.age})
            this.setState({
                isModalVisible: !this.state.isModalVisible
            })
        }
        componentDidUpdate() {
            const {record, updata} = this.props
            if(this.form && updata ) {
                this.form.setFieldsValue({Name: record.name, Address: record.address, Age: record.age})
            } else {
                this.form.resetFields()
            }
        }

        handleCancel = () => {
            this.form.setFieldsValue({Name: '', Address: '', Age: ''})
            this.setState({
                isModalVisible: !this.state.isModalVisible
            })
        }

        render() {
            const { isModalVisible } = this.state
            const {record} = this.props
           
            // console.log("子：：", this.props)
            return (
                <div>
                    {/* <Button type="primary" onClick={this.showModal}>
                Open Modal
            </Button> */}
                    <Modal title="添加" visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel}>

                        <Form
                            ref={e => this.form = e}
                            name="basic"
                            labelCol={{span: 8,}}
                            wrapperCol={{ span: 16,}}
                            initialValues={{remember: true,}}
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                            autoComplete="off"
                        >
                            {/*  autoComplete ，当我们在浏览器中输入表单信息的时候，往往input文本输入框会记录下之前提交表单的信息，很容易暴露数据，autocomplete="off"属性可以完美的解决这个问题 */}
                            <Form.Item
                                label="Name"
                                name="Name"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入名字',
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="Address"
                                name="Address"
                                // rules={[
                                //     {
                                //         required: true,
                                //         message: '请输入地址',
                                //     },
                                // ]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="Age"
                                name="Age"
                                // rules={[
                                //     {
                                //         required: true,
                                //         message: '请输入年龄',
                                //     },
                                // ]}
                            >
                                <Input />
                            </Form.Item>

                            {/* <Form.Item
                                name="remember"
                                valuePropName="checked"
                                wrapperCol={{
                                    offset: 8,
                                    span: 16,
                                }}
                            >
                                <Checkbox>Remember me</Checkbox>
                            </Form.Item> */}

                            {/* <Form.Item
                                wrapperCol={{
                                    offset: 8,
                                    span: 16,
                                }}
                            >
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item> */}
                        </Form>


                    </Modal>
                </div>
            )
        }
    }
